<template>
	<div>
		<div>
			<el-row>
				<el-button type="primary" size="mini" round><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
				<el-button type="success" size="mini" round><i class="el-icon-finished"></i> 修改</el-button>
				<el-button type="danger" size="mini" round><i class="el-icon-delete"></i> 删除</el-button>
				<el-button type="primary" size="mini" round><i class="el-icon-printer"></i> 打印</el-button>
			</el-row>
		</div>
		<hr />
		<div>
			<el-form ref="form" :model="form" label-width="80px" size="small">
				<el-row :gutter="20">
					<el-col :span="5">
						<el-form-item prop="theme" label="主题:">
							<el-input v-model="form.theme"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="buyer" label="采购员:">
							<el-input v-model="form.buyer"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="supplier" label="供应商:">
							<el-input v-model="form.supplier"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="state" label="审批状态">
							<el-input v-model="form.state"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-button type="primary" size="small" >查询</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<h2>采购订单列表</h2>
		<div class="orderlist-main">
			<el-table size="mini" :data="orderlist" height="400" border style="width:100%" @selection-change="handleSelectionChange">
				<el-table-column fixed type="selection" width="55"></el-table-column>
				<el-table-column align="center" width="80" type="index" label="序号"></el-table-column>
				<el-table-column align="center" width="120" prop="id" label="单据编号"></el-table-column>
				<el-table-column align="center" width="150" prop="theme" label="主题"></el-table-column>
				<el-table-column align="center" width="120" prop="purtype" label="采购类别"></el-table-column>
				<el-table-column align="center" width="120" prop="supplier" label="供应商"></el-table-column>
				<el-table-column align="center" width="120" prop="buyer" label="采购员"></el-table-column>
				<el-table-column align="center" width="120" prop="other" label="对方代表"></el-table-column>
				<el-table-column align="center" width="120" prop="signdate" label="签单日期"></el-table-column>
				<el-table-column align="center" width="120" prop="delivery" label="交货方式"></el-table-column>
				<el-table-column align="center" width="120" prop="transport" label="运送方式"></el-table-column>
				<el-table-column align="center" width="180" prop="settlement" label="结算方式"></el-table-column>
				<el-table-column align="center" width="120" prop="state" label="状态"></el-table-column>
			</el-table>
		</div>
		<div class="block">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="currentPage"
			  :page-sizes="[10, 20, 30, 50]"
			  :page-size="10"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="100">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return{
				form:{
					theme:'',
					buyer:'',
					supplier:'',
					state:''
				},
				orderlist:[{
					id:'',
					theme:'',
					purtype:'',
					supplier:'',
					buyer:'',
					other:'',
					signdate:'',
					delivery:'',
					transport:'',
					settlement:'',
					state:''
				}],
				currentPage: 1
			}
		},
		methods:{
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style>
	.orderlist-main{
		border: 2px solid gainsboro;
		padding-top: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}
</style>
